<script lang="ts">
import BavButton from '../components/BavButton.vue'
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  components: {
    BavButton
  },

  setup() {
    let router: any = useRouter()

    const goHome = (path: any) => {
      router.push({
        path
      })
    }

    const goSearch = (path: any) => {
      router.push({
        path
      })
    }
    return {
      goHome,
      goSearch
    }
  }
})
</script>

<template>
  <div class="ris">
    <div class="mhy-no">
      <div class="rile" @click="goHome('/')"><span class="iconfont icon-zuojian"></span></div>
      <div class="no" @click="goSearch('/search')">
        <div class="iconfont icon-sousuo">
          <span class="xu">须弥</span>
        </div>
      </div>

      <div class="leftl">
        <div class="tle"><span class="iconfont icon-sangedian"></span></div>
      </div>
    </div>

    <div class="titlie">
      <img src="../assets/img/33.jpg" alt="" />
    </div>

    <div class="box">
      <img src="../assets/img/34.jpg" alt="" />
      <div class="new"><img src="" alt="" /></div>

      <div class="new-l">
        <ul>
          <li></li>
          <li></li>
        </ul>
      </div>

      <div class="new-ll">
        <ul>
          <li></li>
          <li></li>
        </ul>
      </div>
      <!-- 佳意系列 -->
      <div class="summit">
        <img src="../assets/img/35.jpg" alt="" />
      </div>

      <div class="summit">
        <img src="../assets/img/36.jpg" alt="" />
      </div>

      <div class="summit">
        <img src="../assets/img/37.jpg" alt="" />
      </div>
    </div>

    <BavButton :active="0" />
  </div>
</template>

<style lang="scss" scoped>
@import url(../../src/assets/font01/iconfont.css);
// *{
//     box-sizing: border-box;
// }
//顶部导航
.mhy-no {
  height: 45px;
  background-color: #ffffff;
  display: flex;
  position: fixed;
  width: 100%;
  border-bottom: 1px solid #f3f3f5;
}
.ris {
  width: 100%;
  height: 100%;
}

.no {
  height: 34px;
  background-color: #f9f9f9;
  margin-left: 11px;
  width: 80%;
  margin-top: 5px;
  border-radius: 14px;
  padding-right: 50px;
  display: flex;
}

.leftl {
  height: 32px;
  background-color: #ffffff;
  border: 1px solid #f6f6f6;
  width: 15%;
  margin-right: 10px;
  margin-left: 5px;
  margin-top: 6px;
  border-radius: 20px;
  margin-right: 5px;
}

.no .iconfont {
  line-height: 35px;
  padding-left: 10px;
  color: #9696a1;
}

.no .xu {
  font-size: 14px;
  margin-left: 2px;
  color: #e8e8e9;
}

.leftl .iconfont {
  padding-left: 2px;
}

.leftl .tle {
  height: 22px;
  width: 22px;
  margin: 0 auto;
  /* background-color: beige; */
  padding-top: 8px;
}
.rile {
  /* height: 20px;
    margin-top: 10px; */
  /* background-color: red; */
  width: 10%;
  margin-left: 10px;
}

.rile .iconfont {
  line-height: 43px;
  padding-left: 5px;
}

.titlie {
  width: 100%;
  height: auto;
}

.titlie img {
  width: 100%;
}

.box {
  width: 100%;
  background-color: red;
  height: 600px;
}
.box img {
  width: 100%;
  position: relative;
}
.new {
  width: 100%;
  height: 130px;
  // background-color: orange;
  position: absolute;
  top: 346px;
}
.new img {
  width: 100%;
}
.new-l {
  display: flex;
  margin-top: 10px;
}
.new-l ul {
  width: 100%;
  height: 235px;
  display: flex;
  position: absolute;
  top: 484px;
}
.new-l li {
  width: 50%;
  height: 235px;

  // background-color: blueviolet;
}
.new-ll {
  display: flex;
  margin-top: 10px;
}
.new-ll ul {
  width: 100%;
  height: 235px;
  display: flex;
  position: absolute;
  top: 725px;
}
.new-ll li {
  width: 50%;
  height: 235px;

  // background-color: red;
}
.summit {
  width: 100%;
  height: auto;
}
.summit img {
  width: 100%;
}
</style>
